<!-- 复选框组件 -->
<template>
  <div class="btn" @click="isShow = true">选择</div>
  <van-popup v-model:show="isShow" position="bottom" :style="{ height: '30%',padding:'20px' }">
        <van-checkbox-group
          @change="changeGroup"
          v-model="groupChecked"
          :direction="direction"
          :max="max"
          :disabled="disabled"
        >
          <van-checkbox
            v-for="(item, i) in state.checkList"
            :key="i"
            :name="item.value"
            shape="square"
          >
            {{ item.text }}
          </van-checkbox>
        </van-checkbox-group>
  </van-popup>
</template>

<script setup>
import { ref, reactive, watch, onBeforeMount } from 'vue'
import { dictStore } from '@/pinia/modules/dict.js'

const emit = defineEmits(['update:value'])

const isShow = ref(false)
const props = defineProps({
  // label名称
  labelText: {
    type: String,
    default: '复选框'
  },

  // 双向绑定的值
  value: {
    type: String,
    default: ''
  },

  // 最多可选择项个数
  max: {
    type: Number,
    default: 0
  },

  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },

  //   排列方式 vertical竖向
  direction: {
    type: String,
    default: 'horizontal'
  },
  code:{
    type: String,
    default:'SF'
  }
})

watch(
  () => props.value,
  val => {
    if (val.length > 0) {
      groupChecked.value = val.split(',')
    }
  }
)

const groupChecked = ref([])
const groupCheckedText = ref('')
const state = reactive({
  checkList:[]
})
const keyValue = ref()

const initCode = () => {
  let target = dictStore().dict.find(item => item.code == props.code)
  let arr = []
  if (target && target.children.length > 0) {
    target.children.forEach(item => {
      arr.push({ value: item.code, text: item.name })
    })
  }
  state.checkList = arr
  keyValue.value = new Date().getTime()
  console.log(arr)
}

const changeGroup = val => {
  emit('update:value', val.join(','))
}

onBeforeMount(()=>{
  initCode()
})
</script>
<style lang="scss" scoped>
.van-checkbox {
  margin: 5px 12px 5px 0;
}
.btn {
  font-size: 36px;
  color: #4293f4;
}
</style>
